<template>
  <div class="household-management">
    <!-- 标题 -->
    <div class="household-management-title">
      <span>人员管理</span>&nbsp; <span>></span>&nbsp;
      <span>住户认证</span>
    </div>
    <!-- 可操作区域 -->
    <div class="household-management-operation">
      <!-- 住户姓名查询 -->
      <div class="household-management-operation-find search">
        <!-- 住户名字 -->
        <div>住户姓名：</div>
        <!-- 查询框 -->
        <div class="household-management-operation-find-select">
          <el-input @clear="clearOver" type="text" v-model="state.SelectName" placeholder="请输入姓名" @keyup.enter.native="getName" clearable />
        </div>
      </div>
      <!-- 住户电话查询 -->
      <div class="household-management-operation-find search">
        <!-- 住户电话 -->
        <div>住户电话：</div>
        <!-- 查询框 -->
        <div class="household-management-operation-find-select">
          <el-input @clear="clearOver" type="text" v-model="state.SelectNumber" placeholder="请输入电话" @keyup.enter.native="getNumber"
            clearable />
        </div>
      </div>
      <!-- 住户地址查询 -->
      <div class="household-management-operation-find search">
        <!-- 住户地址 -->
        <div>住户地址：</div>
        <!-- 查询框 -->
        <div class="household-management-operation-find-select">
          <el-input @clear="clearOver" type="text" v-model="state.SelectAddress" placeholder="请输入地址" @keyup.enter.native="getAddress"
            clearable />
        </div>
      </div>
    </div>
    <!-- 表格展示数据 -->
    <div class="household-management-table">
      <el-table :data="state.tableData" border size="small" style="width: 100%">
        <el-table-column prop="bunkId" label="序号" width="150" />
        <el-table-column prop="applicant" label="姓名" width="90" />
        <el-table-column prop="tel" label="电话" width="150" />
        <el-table-column prop="gender" label="性别" width="60" />
        <el-table-column prop="address" label="住址（房屋）" width="200" />
        <el-table-column prop="idCard" label="身份证号" width="160" />
        <el-table-column prop="buildingName" label="住户类型" width="90" />
        <el-table-column prop="applyDate" label="提交时间" width="140" />
        <el-table-column prop="documentStatus" label="操作" />
      </el-table>
    </div>
    <!-- 分页器 -->
    <div class="paging">
      <el-pagination background v-model:current-page="state.currentPage" v-model:page-size="state.pageSize" small
        layout="prev, pager, next, jumper" :total="state.total" @size-change="handleSizeChange"
        @current-change="handleCurrentChange" @prev-click="prevChange" @next-click="nextChange" />
    </div>
  </div>
</template>

<script>
import { onMounted, reactive } from "vue";
import getApi from "@/api/getApi";
export default {
  setup() {
    const state = reactive({
      SelectName: "",
      SelectNumber: "",
      SelectAddress: "",
      Selectvalue: "",
      tableDataPage: [],
      tableData: [],
      total: 1,
      Selecttype: [
        {
          value: "住户",
          label: "住户",
        },
        {
          value: "住户",
          label: "住户",
        },
        {
          value: "住户",
          label: "住户",
        },
      ],
      showData: [],
      pageSize: 10,
      currentPage: 1,
      certinfoKey: false,
    });
    // 生命周期
    onMounted(() => {
      getShowDate();
    });

    // 读取cookie缓存token
    const getCookie = (cname) => {
      // 参数为存储名
      var name = cname + "=";
      var ca = document.cookie.split(";");
      for (var i = 0; i < ca.length; i++) {
        var c = ca[i].trim();
        if (c.indexOf(name) == 0)
          return decodeURIComponent(c.substring(name.length, c.length));
      }
      return "";
    };
    // 发送接口请求
    const getShowDate = () => {
      getApi(
        "/applicationform",
        "get",
        {},
        { Authorization: getCookie("token") }
      ).then((res) => {
        // console.log(res)
        state.showData = res.data.data;
        state.total = parseInt(
          Math.ceil(state.showData.length / state.pageSize) * state.pageSize
        );
        handleSizeChange();
      });
    };

    // 回车监听姓名搜索框里需要搜索的名字
    const getName = () => {
      let obj = {
        applicant: state.SelectName,
        page: state.currentPage,
        pageSize: state.pageSize,
      };
      getApi(
        `http://49.234.63.243:8080/applicationform/selectByApplicantOrTelOrAddress?page=${obj.page}&pageSize=${obj.pageSize}&applicant=${obj.applicant}`,
        "get",
        {},
        {
          Authorization: getCookie("token"),
        }
      ).then((res) => {
        // console.log(res.data.data.data)
        state.showData = res.data.data.data;
        state.total = parseInt(
          Math.ceil(state.showData.length / state.pageSize) * state.pageSize
        );
        handleSizeChange();
      });
    };
    // 回车监听姓名搜索框里需要搜索的电话
    const getNumber = () => {
      let obj = {
        tel: state.SelectNumber,
        page: state.currentPage,
        pageSize: state.pageSize,
      };
      getApi(
        `http://49.234.63.243:8080/applicationform/selectByApplicantOrTelOrAddress?page=${obj.page}&pageSize=${obj.pageSize}&tel=${obj.tel}`,
        "get",
        {},
        {
          Authorization: getCookie("token"),
        }
      ).then((res) => {
        state.showData = res.data.data.data;
        state.total = parseInt(
          Math.ceil(state.showData.length / state.pageSize) * state.pageSize
        );
        handleSizeChange();
        // console.log(res, "number");
      });
      // console.log(state.SelectNumber);
    };
    // 回车监听姓名搜索框里需要搜索的地址
    const getAddress = () => {
      let obj = {
        address: state.SelectAddress,
        page: state.currentPage,
        pageSize: state.pageSize,
      };
      getApi(
        `http://49.234.63.243:8080/applicationform/selectByApplicantOrTelOrAddress?page=${obj.page}&pageSize=${obj.pageSize}&address=${obj.address}`,
        "get",
        {},
        {
          Authorization: getCookie("token"),
        }
      ).then((res) => {
        state.showData = res.data.data.data;
        state.total = parseInt(
          Math.ceil(state.showData.length / state.pageSize) * state.pageSize
        );
        handleSizeChange();
      });
    };
    // page-size分页器事件
    const handleSizeChange = () => {
      if (state.showData.length < 10) {
        let res = [];
        res.push(...state.showData);
        // console.log(res[0],'1')
        state.tableData = res;
      } else {
        // console.log(222)
        // console.log(state.showData, "data");
        let count = 0;
        let res = [];
        for (let i = 0; i < state.showData.length; i++) {
          if (i != state.showData.length - 1) {
            if (i == 0) {
              continue;
            }
            if (i % state.pageSize == 0) {
              let arr = state.showData.slice(count, i);
              count = i;
              res.push(arr);
            }
          } else {
            let arr = state.showData.slice(count, i + 1);
            res.push(arr);
          }
        }
        state.tableDataPage = res;
        handleCurrentChange(1);
      }
    };

    // current-page分页器事件
    const handleCurrentChange = (e) => {
      // 切换页数，然后把e传参的页数传进来，然后发起下一页的数据请求，然后申请完将拿到的数据数组赋值给state.showData
      state.tableData = state.tableDataPage[e - 1];
      state.currentPage = e;
    };
    // 点击上一页分页器触发事件
    const prevChange = (e) => {
      // console.log(e,2)
    };
    // 点击下一页分页器触发事件
    const nextChange = (e) => {
      // console.log(e,3)
    };

    // 一键清空
    const clearOver = () =>{
      getShowDate();
    }

    return {
      getName,
      state,
      getNumber,
      getAddress,
      handleSizeChange,
      handleCurrentChange,
      prevChange,
      nextChange,
      clearOver
    };
  },
};
</script>

<style lang="less" scoped>
.household-management {
  height: 100%;
  width: 100%;
  background-color: #ffffff;
  padding: 20px 16px 20px 16px;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  overflow-y: scroll;

  .household-management-title {
    color: #898989;
  }

  .household-management-operation {
    width: 75%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 30px;

    .search {

      // margin: 0 1px;
      .el-input {
        width: 90%;
      }
    }

    .household-management-operation-find {
      display: flex;
      align-items: center;
      font-size: 14px;

      .household-management-operation-find-select {
        input {
          outline: none;
          width: 100px;
          height: 24px;
          border: 2px solid rgb(171, 171, 171);
        }

        input::-webkit-input-placeholder {
          color: black;
        }

        .select-options {
          width: 70px;
        }
      }
    }
  }

  .household-management-table {
    margin-top: 30px;
    margin-bottom: 60px;
  }

  .paging {
    width: calc(100% - 32px);
    margin-bottom: 30px;
    display: flex;
    justify-content: center;
  }
}

::-webkit-scrollbar {
  width: 7px;
}
</style>
